<template>
	<!-- 公共头部 -->
	<common-head :isShowBackBtn="false"></common-head>
	
	<view class="tab-hd">
		<view :class="['txt', tabOn == 1 ? 'on' : '']" @click="tabClick(1)">产品系列</view>
		<view :class="['txt', tabOn == 2 ? 'on' : '']" @click="tabClick(2)">院线高定</view>
		<view :class="['txt', tabOn == 3 ? 'on' : '']" @click="tabClick(3)">小样&福利爆品</view>
	</view>
	<view class="tab-bd">
		<view v-show="tabOn === 1">
			<view class="main" >
				<view class="main-l" :style="{ minHeight: windowHeight - 100 + 'px' }">
					<view :class="['item', item.state ? 'on' : '']" v-for="item in leftNavData" :key="item.id" @click="handleLeftNav(item.id)" :style="[item.id == 4 ? 'pointer-events : none' : '', item.oneRound ? 'border-radius: 0 20rpx 0 0' : '', item.twoRound ? 'border-radius: 0 20rpx 20rpx 0' : '', item.thirdRound ? 'border-radius: 0 0 20rpx 0' : '', item.noRound ? 'border-radius: 0' : '']">
						<image class="img" :src="item.url" mode=""></image>
						<view class="txt">{{item.name}}</view>
					</view>
				</view>
				<view class="main-r">
					<image @click="clickJump('/pages/product/productInfo')" class="head-img" src="https://build.gzwhir.com/zygzmr202410252905/appImages/p-1.png" mode=""></image>
					<view class="title">修复管理</view>
					<view class="con-box">
						<view class="item" v-for="item in dataSkin1" :key="item.id"  @click="clickJump('/pages/product/productInfo')">
							<image class="img" :src="item.url" mode=""></image>
							<view class="name">{{item.title}}</view>
							<view class="tag-box">
								<view class="tag" :style="{'background': colorList[index2]}" v-for="(item2, index2) in item.tags" :key="index2">{{item2}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-show="tabOn === 2">
			<!-- 院线高定 -->
			<view class="yxgd">
				<view class="yxgd-item" @click="clickJump('/pages/product/yxgdInfo')">
					<image class="img" src="https://build.gzwhir.com/zygzmr202410252905/appImages/img7.png" mode=""></image>
					<view class="title">胶原水光精华液</view>
					<view class="tips">打通肌肤吸收通道，深层导入精华</view>
				</view>
				<view class="yxgd-item" @click="clickJump('/pages/product/yxgdInfo')">
					<image class="img" src="https://build.gzwhir.com/zygzmr202410252905/appImages/img8.png" mode=""></image>
					<view class="title">EGF痘坑毛孔</view>
					<view class="tips">促进皮肤修复，减少痘坑深度，毛孔收缩</view>
				</view>
				<view class="yxgd-item" @click="clickJump('/pages/product/yxgdInfo')">
					<image class="img" src="https://build.gzwhir.com/zygzmr202410252905/appImages/img7.png" mode=""></image>
					<view class="title">细致嫩肤冻干粉</view>
					<view class="tips">促进肌肤修复、淡化黑色素、预防皮肤松弛</view>
				</view>
				<view class="yxgd-item" @click="clickJump('/pages/product/yxgdInfo')">
					<image class="img" src="https://build.gzwhir.com/zygzmr202410252905/appImages/img8.png" mode=""></image>
					<view class="title">多肽复合焕肤套</view>
					<view class="tips">改善肌肤状态，达到修护、紧致、抗衰</view>
				</view>
			</view>
		</view>
		<view v-show="tabOn === 3">
			<!-- 小样&福利爆品 -->
			<view class="main mainExample">
				<view class="main-l" :style="{ minHeight: windowHeight - 100 + 'px' }">
					<view :class="['item', item.state ? 'on' : '']" v-for="item in leftNavExampleData" :key="item.id" @click="handleLeftNavExample(item.id)" :style="[item.id == 3 ? 'pointer-events : none' : '', item.oneRound ? 'border-radius: 0 20rpx 0 0' : '', item.twoRound ? 'border-radius: 0 20rpx 20rpx 0' : '', item.thirdRound ? 'border-radius: 0 0 20rpx 0' : '', item.noRound ? 'border-radius: 0' : '']">
						<image class="img" :src="item.url" mode=""></image>
						<view class="txt">{{item.name}}</view>
					</view>
				</view>
				<view class="main-r">
					<image class="head-img" src="https://build.gzwhir.com/zygzmr202410252905/appImages/p-9.png" mode=""></image>
					<view class="title">小样体验</view>
					<view class="con-box">
						<view class="item" v-for="item in dataExample" :key="item.id">
							<image class="img" :src="item.url" mode=""></image>
							<view class="name">{{item.title}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	
	
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad } from "@dcloudio/uni-app";
	
	let tabOn = ref(1)
	let tabClick = (val) =>{
		tabOn.value = val
	}
	let clickJump = (url) => {
		uni.navigateTo({
			url: url
		})
	}
	
	// 手机可视高度
	let windowWidth = ref(0)
	let windowHeight = ref(0)
	onLoad(() => {
		uni.getSystemInfo({
			success: function (res) {
				windowWidth.value = res.windowWidth;   // 窗口宽度
				windowHeight.value = res.windowHeight; // 窗口高度
			}
		});
	});
	
	let leftNavData = ref([
		{
			id: 1,
			state: true,
			oneRound: false,
			twoRound: false,
			thirdRound: false,
			noRound: true,
			name: '养肤',
			url: '../../static/images/icon11.png'
		},
		{
			id: 2,
			state: false,
			oneRound: true,
			twoRound: false,
			thirdRound: false,
			noRound: false,
			name: '调肤',
			url: '../../static/images/icon12.png'
		},
		{
			id: 3,
			state: false,
			oneRound: false,
			twoRound: false,
			thirdRound: false,
			noRound: true,
			name: '疗肤',
			url: '../../static/images/icon13.png'
		},
		{
			id: 4,
			state: false,
			oneRound: false,
			twoRound: false,
			thirdRound: false,
			noRound: true,
			name: '',
			url: ''
		}
	])
	let handleLeftNav = (id) => {
		leftNavData.value.forEach((ele, index) => {
			if(ele.id == id){
				ele.state = true
			}else{
				ele.state = false
			}
		})
		// 左边导航,选中高亮平滑圆角，很复杂，需大神优化
		if(id == 1){
			leftNavData.value[1].noRound = false
			leftNavData.value[1].thirdRound = false
			leftNavData.value[1].oneRound = true
			leftNavData.value[2].noRound = true
			leftNavData.value[3].noRound = true
		}else if(id == 2){
			leftNavData.value[0].noRound = false
			leftNavData.value[0].thirdRound = true
			leftNavData.value[2].noRound = false
			leftNavData.value[2].oneRound = true
			leftNavData.value[3].noRound = true
		}else if(id == 3){
			leftNavData.value[1].noRound = false
			leftNavData.value[1].thirdRound = true
			leftNavData.value[3].noRound = false
			leftNavData.value[3].oneRound = true
			leftNavData.value[0].noRound = true
		}
		
	}
	
	// 小样&福利爆品
	let leftNavExampleData = ref([
		{
			id: 1,
			state: true,
			oneRound: false,
			twoRound: false,
			thirdRound: false,
			noRound: true,
			name: '小样',
			url: '../../static/images/icon14.png'
		},
		{
			id: 2,
			state: false,
			oneRound: true,
			twoRound: false,
			thirdRound: false,
			noRound: false,
			name: '福利爆品',
			url: '../../static/images/icon15.png'
		},
		{
			id: 3,
			state: false,
			oneRound: false,
			twoRound: false,
			thirdRound: false,
			noRound: true,
			name: '',
			url: ''
		}
	])
	let handleLeftNavExample = (id) => {
		leftNavExampleData.value.forEach((ele, index) => {
			if(ele.id == id){
				ele.state = true
			}else{
				ele.state = false
			}
		})
		// 左边导航,选中高亮平滑圆角，很复杂，需大神优化
		if(id == 1){
			leftNavExampleData.value[1].noRound = false
			leftNavExampleData.value[1].thirdRound = false
			leftNavExampleData.value[1].oneRound = true
			leftNavExampleData.value[2].noRound = true
		}else if(id == 2){
			leftNavExampleData.value[0].noRound = false
			leftNavExampleData.value[0].thirdRound = true
			leftNavExampleData.value[2].noRound = false
			leftNavExampleData.value[2].oneRound = true
		}
	}
	
	
	let dataSkin1 = [
		{
			id: 1,
			title: "安肌舒护肌底冰膜",
			url: "https://build.gzwhir.com/zygzmr202410252905/appImages/p-2.png",
			tags: ["补水保湿", "滋润"]
		},
		{
			id: 2,
			title: "安肌养护肌底液",
			url: "https://build.gzwhir.com/zygzmr202410252905/appImages/p-3.png",
			tags: ["缓干燥", "滋润", "美白"]
		},
		{
			id: 3,
			title: "安肌海茴香舒护面膜",
			url: "https://build.gzwhir.com/zygzmr202410252905/appImages/p-4.png",
			tags: ["水润饱满", "抗氧化"]
		},
		{
			id: 4,
			title: "水光美白精华",
			url: "https://build.gzwhir.com/zygzmr202410252905/appImages/p-5.png",
			tags: ["美白", "抑制黑色素"]
		},
		{
			id: 5,
			title: "安肌养护眼霜",
			url: "https://build.gzwhir.com/zygzmr202410252905/appImages/p-6.png",
			tags: ["补水保湿", "滋润"]
		}
	]
	let colorList = ref(["#f1e2e5", "#d8ece5", "#f1e8d8", "#dce9ec", "#e8e6f1"])
	
	let dataExample = [
		{
			id: 1,
			title: "洗面奶小样",
			url: "https://build.gzwhir.com/zygzmr202410252905/appImages/p-10.png"
		},
		{
			id: 2,
			title: "多维净肤霜",
			url: "https://build.gzwhir.com/zygzmr202410252905/appImages/p-11.png"
		},
		{
			id: 3,
			title: "护手霜",
			url: "https://build.gzwhir.com/zygzmr202410252905/appImages/p-12.png"
		},
		{
			id: 4,
			title: "肌活酵萃精华水",
			url: "https://build.gzwhir.com/zygzmr202410252905/appImages/p-13.png"
		},
		{
			id: 5,
			title: "多维光感霜",
			url: "https://build.gzwhir.com/zygzmr202410252905/appImages/p-14.png"
		},
		{
			id: 6,
			title: "贻贝冰肌面膜",
			url: "https://build.gzwhir.com/zygzmr202410252905/appImages/p-15.png"
		},
	]
	
	
</script>

<style lang="scss">
page{
	background: #fff;
}
.tab-hd{
	display: flex;
	align-items: center;
	justify-content: space-around;
	height: 100rpx;
	line-height: 100rpx;
	
	.txt{
		font-size: 28rpx;
		color: #888;
		
		&.on{
			color: #333;
			font-weight: bold;
			background: url("@/static/images/bg1.png") no-repeat left 62rpx;
			background-size: contain;
		}
		&:last-child.on{
			background: url("@/static/images/bg4.png") no-repeat left 62rpx;
			background-size: contain;
		}
	}
}

.tab-bd{
	padding-top: 20rpx;
	box-sizing: border-box;
	
	.main{
		display: flex;
		justify-content: space-between;
		
		.main-l{
			width: 150rpx;
			// height: 100%;
			// background: #f5f5f5;
			background: linear-gradient(to bottom, #fff 260px, #f5f5f5 260px);
			margin-right: 30rpx;
			.item{
				padding: 40rpx 0;
				text-align: center;
				background: #f5f5f5;
				
				
				.img{
					width: 45rpx;
					height: 45rpx;
				}
				.txt{
					font-size: 24rpx;
					color: #888;
					width: 54rpx;
					// height: 16rpx;
					margin: 10rpx auto 0;
				}
				
				&.on{
					background: #fff;
					
					.txt{
						background: url("@/static/images/bg3.png") no-repeat left 12rpx;
						background-size: contain;
					}
				}
			}
		}
		.main-r{
			flex: 1;
			
			.head-img{
				width: 530rpx;
				height: 265rpx;
				border-radius: 5rpx;
			}
			.title{
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
				margin-top: 50rpx;
				margin-bottom: 40rpx;
			}
			
			.con-box{
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;
				
				.item{
					width: 50%;
					margin-bottom: 40rpx;
					
					.img{
						width: 250rpx;
						height: 250rpx;
					}
					.name{
						font-size: 28rpx;
						color: #333;
						margin-top: 30rpx;
						margin-bottom: 20rpx;
					}
					.tag-box{
						display: flex;
						align-items: center;
						.tag{
							padding: 8rpx 12rpx;
							background: #f1e2e5;
							margin-right: 10rpx;
							margin-bottom: 10rpx;
							border-radius: 6rpx;
							font-size: 20rpx;
							color: #333;
						}
					}
				}
			}
		}
	}
	.mainExample{
		.main-l{
			background: linear-gradient(to bottom, #fff 200px, #f5f5f5 200px);
		}
	}
}

// 院线高定
.yxgd{
	background: #f5f5f5;
	padding: 40rpx;
	
	.yxgd-item{
		background: #fff;
		padding-bottom: 40rpx;
		border-radius: 10rpx;
		margin-bottom: 40rpx;
		
		.img{
			width: 670rpx;
			height: 335rpx;
		}
		.title{
			font-size: 28rpx;
			color: #333;
			font-weight: bold;
			padding: 30rpx 30rpx 10rpx;
		}
		.tips{
			font-size: 24rpx;
			color: #888;
			padding: 0rpx 30rpx;
		}
	}
}



</style>
